<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 - 3D</title>
<style>
.box_round {
     -moz-border-radius: 10px; /* FF1+ */
  -webkit-border-radius: 10px; /* Saf3+, Chrome */
          border-radius: 10px; /* Opera 10.5, IE 9 */
}
  

.box_shadow {
     -moz-box-shadow: 0px 0px 3px #000; /* FF3.5+ */
  -webkit-box-shadow: 0px 0px 3px #000; /* Saf3.0+, Chrome */
          box-shadow: 0px 0px 3px #000; /* Opera 10.5, IE 9.0 */
              filter:  progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px, Color='#ffffff'); /* IE6,IE7 */
          -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px, Color='#ffffff')"; /* IE8 */
}
  

.box_gradient {
  background-image: -moz-linear-gradient(top, #44444488, #99999988); /* FF3.6 */
  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgba(180,180,144,0.6)),color-stop(1, rgba(255,255,255,0.6))); /* Saf4+, Chrome */
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999'); /* IE6,IE7 */
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999')"; /* IE8 */
}
  

.box_rgba {
  background-color: #B4B490;
  background-color: rgba(180, 180, 144, 0.6);  /* FF3+, Saf3+, Opera 10.10+, Chrome */
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#99B4B490',endColorstr='#99B4B490'); /* IE6,IE7 */
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#99B4B490',endColorstr='#99B4B490')"; /* IE8 */
}
  

.box_rotate {
     -moz-transform: rotate(7.5deg);  /* FF3.5+ */
       -o-transform: rotate(7.5deg);  /* Opera 10.5 */
  -webkit-transform: rotate(7.5deg);  /* Saf3.1+, Chrome */
             filter:  progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083);  /* IE6,IE7 */
         -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */
}
  
/* */
 @font-face {
  font-family: 'BastardusSans';
  src: local('BastardusSans.ttf'), 
        url('BastardusSans.ttf') format('truetype');  /* Saf3+,Chrome,Opera10+ */
}
body{
	background-attachment: fixed;
	background-clip: border-box;
	background-color: #3759C7;
	background-image: url(bg.jpg);
	background-position:50%;
	font: 1em "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	line-height: 1.5em;
}
h1,h2,h3,h4,h5,h6{
	color:#149;
	font-family: BastardusSans;
	text-shadow: rgba(0, 0, 0, 0.3) 1px 1px 3px;
	border-bottom: 1px solid rgba(17, 68, 153, 0.5);
	}
h1{
	font-size:2.25em;
	margin: .5em 0;
	}
h2{
	font-size:2em;
	margin: .67em 0;
}
h3{
	font-size:1.75em;
	margin: .71em 0;
}
h4{
	font-size:1.5em;
	margin: .75em 0
}
h5{
	font-size:1.25em;
	margin: .79em 0;
}
h6{
	font-size:1.17em;
	margin: .83em 0;
}

#main{
	background-color: #B4B490;
 	background-color: rgba(255, 255, 255, 0.5);
	margin: 40px auto;
	width:80%;
	padding:20px;
	-webkit-box-shadow: 0px 0px 3px #666;
	}
#head{
	color:#FFF;
	margin:0px;
	background-color:#149;
    background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgba(0,0,0,0.25)),color-stop(1, rgba(255,255,255,0.25))); /* Saf4+, Chrome */
	padding: 5px;
	overflow:hidden;
	}
#head h1{
	color:#FFF;
	border:none;
	margin:0;
	padding: 6px;
	float:left;
	font-size:3.25em;
	line-height: 1em;
	}
#head ul{
	list-style:none;
	margin:15px 0;
	padding:0;
	float: right;
	}
#head ul li{
	margin:5px;
	padding:0;
	float: left;
	}
#head ul li a{
	color:#FFF;
	text-decoration:none;
	font-size:1.25em;
	text-shadow: rgba(0, 0, 0, 0.3) 1px 1px 3px;
	margin:0;
	padding:10px;
	border-radius: 10px;
	}
#head ul li a:hover{
	background-color:rgba(255, 255, 255, .4);
	text-shadow: rgba(0, 0, 0, 0.5) 1px 1px 3px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.3) 1px 1px 3px;
	}
#head ul li a.active{
	color:#149;
	background-color:#FFF;
	text-shadow: rgba(0, 0, 0, 0.3) 1px 1px 3px;
	-webkit-box-shadow: rgba(0, 0, 0, 0.3) 1px 1px 3px;
	}
#content{
	padding:0;
	margin:20px 0;
	
	}	
.post{
	margin-right:240px;
	padding:20px;
	border-radius: 10px;
	background-color:rgba(255, 255, 255, .8);
}
#side{
	padding:20px;
	width:180px;
	float:right;
	background-color:rgba(255, 255, 255, .8);
	border-radius: 10px;
	}
#footer{
	text-align:right;
	padding:10px;
	margin:0px;
	border-radius: 10px;
	color:#333;
	text-shadow: rgba(255, 255, 255, 0.35) 1px 1px 1px;
	background-color:rgba(127, 127, 127, .4);
	overflow:hidden;

	}
	
/*border: 3px solid rgba(17, 68, 153, 0.3);*/
</style>
</head>

<body>
<div id="main" class=" box_round">
    <div id="head" class="box_gradient box_round">
    <h1>CSS3 Demo</h1>
    <ul>
    	<li><a href="#">Home</a></li>
        <li><a href="#" class="active">Blog</a></li>
        <li><a href="#">Proyects</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Top 10</a></li>
    </ul>
    </div>
    <div id="content">
    <div id="side">
    	<h5>Tags</h5>
    	<ul>
        	<li><a href="#">Home</a></li>
        <li><a href="#" class="active">Blog</a></li>
        <li><a href="#">Proyects</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Top 10</a></li>
        </ul>
    </div>
        <div class="post">
        <h2>Post Title</h2>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed nisl vel mauris commodo pellentesque vel nec lorem. Ut sit amet nunc ante. Nullam erat neque, laoreet et sagittis a, interdum ut dolor. Nullam dapibus sodales mi quis ornare. Etiam nec neque libero. Integer ac dui augue. Quisque porttitor, erat sit amet vestibulum consequat, dolor mi tempus nunc, ut molestie nisi neque vitae tortor. Vivamus quis ipsum quam, quis bibendum enim. Morbi euismod tellus non augue gravida eu tincidunt augue scelerisque. Nullam non turpis turpis. In ultrices laoreet odio, congue mattis nibh sollicitudin vel. In suscipit tempor dolor vel scelerisque. Donec quis sapien nulla. Curabitur consequat hendrerit vestibulum.
Praesent scelerisque, nisl sit amet malesuada commodo, justo felis vulputate velit, nec vulputate tellus risus at mauris. Phasellus sagittis interdum odio, nec ultricies dui adipiscing in. Suspendisse vulputate gravida diam eget fringilla. Mauris pellentesque commodo tortor luctus malesuada. Etiam augue mi, congue pretium luctus ut, consectetur vel ante. Nulla eget lorem in lacus aliquet elementum. Duis rutrum, erat eu volutpat accumsan, odio metus facilisis leo, non pulvinar risus diam a lorem. Maecenas semper ullamcorper molestie. Pellentesque sapien nisi, dignissim vitae gravida ut, pellentesque nec risus. Donec eget nibh mi. Proin auctor, erat nec venenatis fermentum, eros metus varius eros, consequat venenatis nisi urna sit amet orci. Quisque eget tempor eros. Vestibulum bibendum nulla ut sem ullamcorper venenatis. Cras eget tellus id erat fermentum sagittis.
            <h3>Post Title</h3>
            <h4>Post Title</h4>
            <h5>Post Title</h5>
            <h6>Post Title</h6>
            <div></div>
            
        </div>
       
    </div>
    <div id="footer">&copy;2010 David Gonzalez</div>
</div>
</body>
</html>
